<template>
   <div class="list-tab">
       <!-- 100分支白宽度  overflow-x:auto-->
       <div class="tab-wrapper">
           <!-- li.w *num -->
        <ul class="tab-list" 
            ref="tabWrapper"
            :style="{width:(fieldData.length+1)*tabWidth+'rem'}"
        >
        <tab-item
          :data="{field_name:'全部课程',field:'all'}"
          :index="0"
          :tabIndex="0"
          @onTabClick="onTabClick('all',0)"
        >
        </tab-item>
        <tab-item
           v-for="(item,index) of fieldData"
           :key="index"
           :index="(index+1)"
           :data="item"
           :tabIndex="tabIndex"
           @onTabClick="onTabClick(item.field,index)"
        >
        </tab-item>
        </ul>
       </div>
   </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import {scrollToPosition} from 'utils/tools'
import TabItem from './Item';
export default {
  name:'ListTab',
  props:{
      fieldData:Array
  },
  components:{
     TabItem
  },
  computed:{
      ...mapState(['tabIndex'])
  },
  data(){
      return {
          tabWidth:1.2
      }
  },
  activated(){
      console.log(this.tabIndex)
       scrollToPosition(this.$refs.tabWrapper.children[this.tabIndex])
  },
  methods:{
   ...mapMutations(['selectField','changeTabIndex']),
   onTabClick(field,index){
       console.log('hahah')
       this.selectField(field);
       console.log(index+1)
       this.changeTabIndex(index+1)
  
   }
  },
  watch:{
   tabIndex(){
       scrollToPosition(this.$refs.tabWrapper.children[this.tabIndex])
   }
  }
}
</script>

<style lang="scss" scoped>
 .list-tab {
     height: .35rem;
     background-color: #fff;
     border-bottom: 1px solid #eee;
     overflow: hidden;
     .tab-wrapper {
         height: .43rem;
         overflow-x: auto;
         overflow-y: hidden;
   
       .tab-list{
           height: .35rem;
       }

     }
 }
</style>